<template>
    <div class="closure-task-container">
        <!-- 筛选区域 -->
        <el-card class="filter-card" shadow="hover">
            <el-form :inline="true" :model="filterForm" class="filter-form">
                <el-form-item label="保单编号">
                    <el-input v-model="filterForm.policyId" placeholder="请输入保单编号" clearable style="width: 220px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch" :icon="Search">查询</el-button>
                    <el-button @click="handleReset" :icon="Refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 列表区域 -->
        <el-card class="list-card" shadow="hover">
            <el-table :data="tableData" border stripe style="width: 100%" :loading="loading">
                <el-table-column prop="reportNo" label="报案号" min-width="200" />
                <el-table-column prop="policyId" label="保单编号" min-width="180" />
                <el-table-column prop="insuredId" label="投保人ID" min-width="120" />
                <el-table-column label="灾祸类型" min-width="120">
                    <template #default="scope">
                        <el-tag>{{ getDisasterName(scope.row.disasterType) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="报案状态" min-width="120">
                    <template #default>
                        <el-tag type="warning">待结案</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="报案时间" min-width="200">
                    <template #default="scope">{{ formatDateTime(scope.row.reportTime) }}</template>
                </el-table-column>
                <el-table-column label="操作" min-width="220" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleView(scope.row)"
                            :icon="View">查看</el-button>
                        <el-button type="success" size="small" @click="handleGoClosure(scope.row)"
                            :icon="FolderChecked">去结案</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :total="pagination.total" :page-sizes="[5, 10, 20, 50]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>

        <!-- 查看详情 -->
        <el-dialog v-model="viewVisible" title="报案详情" width="800px">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="报案号">{{ viewData.reportNo }}</el-descriptions-item>
                <el-descriptions-item label="保单号">{{ viewData.policyId }}</el-descriptions-item>
                <el-descriptions-item label="投保人ID">{{ viewData.insuredId }}</el-descriptions-item>
                <el-descriptions-item label="灾祸类型">{{ getDisasterName(viewData.disasterType) }}</el-descriptions-item>
                <el-descriptions-item label="报案时间">{{ formatDateTime(viewData.reportTime) }}</el-descriptions-item>
                <el-descriptions-item label="发生地点" :span="2">{{ viewData.disasterLocation }}</el-descriptions-item>
                <el-descriptions-item label="损失描述" :span="2">{{ viewData.lossDescription }}</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <el-button @click="viewVisible = false">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>


<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import hxxp from '@/utils/hxxp.js'

const router = useRouter()

const loading = ref(false)
const viewVisible = ref(false)

const filterForm = reactive({
    reportNo: '',
    policyId: ''
})

const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
})

const tableData = ref([])
const viewData = reactive({})

const disasterMap = {
    '1': '暴雨',
    '2': '洪水',
    '3': '病虫害',
    '4': '疫病',
    '5': '其他'
}

const getDisasterName = (code) => disasterMap[String(code)] || '未知'
const formatDateTime = (dt) => (dt ? String(dt).replace('T', ' ') : '-')

const fetchTaskList = async () => {
    loading.value = true
    try {
        const params = {
            pageNum: pagination.currentPage,
            pageSize: pagination.pageSize,
            reportStatus: 7,
            policyId: filterForm.policyId || undefined
        }
        const res = await hxxp.get('/aiClaimReport/all', { params })
        if (res.code === 100200) {
            tableData.value = res.data?.list || []
            pagination.total = res.data?.total || 0
        } else {
            ElMessage.error(res.msg || '获取待结案任务失败')
        }
    } catch (e) {
        console.error(e)
        ElMessage.error('获取待结案任务失败，请稍后重试')
    } finally {
        loading.value = false
    }
}

const handleSearch = () => {
    pagination.currentPage = 1
    fetchTaskList()
}

const handleReset = () => {
    filterForm.reportNo = ''
    filterForm.policyId = ''
    pagination.currentPage = 1
    fetchTaskList()
}

const handleSizeChange = (size) => {
    pagination.pageSize = size
    pagination.currentPage = 1
    fetchTaskList()
}

const handleCurrentChange = (page) => {
    pagination.currentPage = page
    fetchTaskList()
}

const handleView = (row) => {
    Object.assign(viewData, row)
    viewVisible.value = true
}

const handleGoClosure = (row) => {
    router.push({
        path: '/closureAdd',
        query: {
            reportNo: row.reportNo,
            policyId: row.policyId,
            insuredId: row.insuredId,
            disasterType: row.disasterType,
            lossDescription: row.lossDescription
        }
    })
}

onMounted(() => {
    fetchTaskList()
})
</script>


<style scoped>
.closure-task-container {
    padding: 20px;
}

.filter-card {
    margin-bottom: 16px;
}

.pagination {
    margin-top: 16px;
    text-align: right;
}
</style>